<template>
  <view class="image-download-page">
    
    <image :src="imagePath" mode="aspectFit" style="width: 100%; max-height: 400rpx; margin-top: 40rpx;"></image>
   
    <button @click="downloadImage"  style="margin-top: 30rpx;color: black;">下载并显示图片</button>
    
    <view class="progress-text" v-if="progress > 0">下载进度：{{ progress }}%</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imagePath: '', 
      progress: 0    
    };
  },
  methods: {
    downloadImage() {
      const imageUrl = 'https://cdn.pixabay.com/photo/2025/11/05/20/57/monastery-9939590_1280.jpg';
      const task = uni.downloadFile({
        url: imageUrl,

        success: (res) => {
          if (res.statusCode === 200) {
            
            this.imagePath = res.tempFilePath;
            console.log('图片下载成功，临时路径：', res.tempFilePath);
          }
        },
        fail: (err) => {
          console.error('图片下载失败：', err);
          uni.showToast({
            title: '下载失败',
            icon: 'none'
          });
        }
      });
	  task.onProgressUpdate((res)=>{
		  console.log('下载进度：', res.progress, '%');
		  console.log('已下载长度：', res.totalBytesWritten, '字节');
		  console.log('总长度：', res.totalBytesExpectedToWrite, '字节');
	  })
    }
  }
};
</script>

<style scoped>
.image-download-page {
  padding: 30rpx;
  
}
.progress-text {
  margin-top: 20rpx;
  color: #666;
  font-size: 28rpx;
  
  
}
</style>